import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import '../resources.dart';

class ImageFullPage extends StatefulWidget {
  final List<String> paths;
  final int index;

  ImageFullPage(this.paths, this.index);

  @override
  State<StatefulWidget> createState() => _ImageFullPageState();
}

class _ImageFullPageState extends State<ImageFullPage> {
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    currentIndex = widget.index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: [
            Container(
                child: PhotoViewGallery.builder(
              backgroundDecoration: BoxDecoration(color: Colors.transparent),
              scrollPhysics: const BouncingScrollPhysics(),
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                    imageProvider: NetworkImage(widget.paths[index] ?? ''),
                    initialScale: PhotoViewComputedScale.contained,
                    minScale: PhotoViewComputedScale.contained * 0.4,
                    maxScale: PhotoViewComputedScale.contained * 8);
              },
              itemCount: widget.paths.length,
              loadingBuilder: (context, event) => Center(
                child: SizedBox(
                  width: 20.0,
                  height: 20.0,
                  child: CircularProgressIndicator(
                    value: event != null && event.expectedTotalBytes != null
                        ? event.cumulativeBytesLoaded /
                            event.expectedTotalBytes!
                        : 0,
                  ),
                ),
              ),
              pageController: PageController(initialPage: widget.index),
              onPageChanged: (index) {
                if (mounted) {
                  setState(() {
                    currentIndex = index;
                  });
                }
              },
            )),
            _buildBack(context)
          ],
        ),
      ),
    );
  }

  Widget _buildBack(BuildContext context) {
    return Positioned(
      width: 375.ss,
      height: 50.ss,
      top: 56,
      child: Container(
        child: Row(
          children: [
            InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: Container(
                width: 50.ss,
                alignment: Alignment.center,
                child: assetImage(ImageUtils.back,
                    width: 35.ss, height: 50.ss),
              ),
            ),
            Expanded(
              child: Text(
                '${currentIndex + 1}/${widget.paths.length}',
                style: mediumF16,
                textAlign: TextAlign.center,
              ),
            ),
            SizedBox(
              width: getScreenSize(50),
            )
          ],
        ),
      ),
    );
  }
}
